<!DOCTYPE html>
<html lang="en" style="font-size: 2vw;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-size: inherit;
        }
        .flex {
            display: flex;
            flex-wrap: wrap;
        }

        .flex > * {
            border: solid 1px #ccc;
            padding: .5rem;
            line-height: 1.6;
            margin: .5rem;
        }
    </style>
</head>
<body>
<div class="flex">
    <div>
        name:<br>
        time:
    </div>
</div>
<div class="flex">
    <form action="inc.jsp" name="f1">
        <input placeholder="name" name="name" value="get"><button>get</button>
    </form>
    <form action="inc.jsp" method="post" name="f2">
        <input placeholder="name" name="name" value="post"><button>post</button>
    </form>
    <form action="inc.jsp" name="f3">
        <input placeholder="name" name="name" value="ajax-get"><button>ajax-get</button>
    </form>
    <form action="inc.jsp" method="post" name="f4">
        <input placeholder="name" name="name" value="ajax-post"><button>ajax-post</button>
    </form>
</div>

<script>
    let obj = document.querySelector(".flex");
    let forms = document.forms;
    console.debug(obj);
    console.debug(forms);
    let getForm = forms[2];
    getForm = forms.f3;
    f3.onsubmit=function(event){
        // event.stopPropagation();
        // event.preventDefault();
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    obj.innerHTML+=xhr.responseText;
                }else {
                    console.warn(`请求失败:${xhr.status}`)
                }
            }
        }
        // let param = new URLSearchParams();
        // param.append("name",getForm.name.value);
        let param = new URLSearchParams(new FormData(getForm));
        xhr.open("get","inc.jsp?"+param.toString());
        xhr.send();
        return false;
    }

    forms[3].onsubmit=function(event){
        // event.stopPropagation();
        // event.preventDefault();
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    obj.innerHTML+=xhr.responseText;
                }else {
                    console.warn(`请求失败:${xhr.status}`)
                }
            }
        }
        // let param = new URLSearchParams();
        // param.append("name",forms[3].name.value);
        let param = new URLSearchParams(new FormData(forms[3]));
        xhr.open("post","inc.jsp");
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(param.toString());
        return false;
    }
</script>

</body>
</html>